<template>
    <div class="nav_child app">
         <!-- <van-nav-bar
            :title="$route.meta.title"
            left-text=""
            border
            left-arrow
            @click-left="$router.back()"
         /> -->
        <div class="course_contant">
            <ul>
                <template v-if="!$util.isEmpty(list)">
                    <li
                        v-for="(item,index) in list"
                        :key="index"
                        @click="jobDetail(item)"
                        >
                        <p class="recruit_position">{{item.title}} <span>{{item.salary}}</span> </p>
                        <div class="position_experience">
                            <div>
                                {{item.requirements}}
                            </div>
                            <div>
                                 | {{item.numbers}}人
                            </div>
                        </div>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</template>

<script>
import $apiCompany from '@/api/company'
export default {
	name: 'jobList',
	data() {
		return {
			list: [],
			query: null
		}
	},
	onLoad(val) {
		console.log(val)
		this.query = val
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			$apiCompany.getJob({
				company_id: this.query.owner_user_id
			})
				.then(res => {
					if (res.status == 'success') {
						this.list = res.data
					} else {
						uni.showToast({
							title: res.errors.message,
							duration: 2000,
							icon: 'none'
						})
					}
				})
		},
		jobDetail(i) {
			let query = {
				id: i.id,
				...this.query
			}
			uni.navigateTo({
				url: `/pages/company/jobDetail${this.commonJS.queryData(query)}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
    .nav_child {
        margin-top: 0;
        background: none;
        background-color: #f5f5f5;
        min-height: 100%;
    }
    .course_contant ul{
        height: auto;
        padding: 5%;
    }
    .course_contant ul li{
        box-sizing: border-box;
        width: 100%;
        height: 132px;
        margin-top: 30px;
        border-radius: 20px;
        background: white;
        position: relative;
        padding: 15px;
    }
    .course_contant ul li p{

    }
    .recruit_position{
        font-size: 30px;
        line-height: 50px;
    }
    .recruit_position span{
        float: right;
        color: #ff6900;
    }
    .position_experience{
        font-size: 24px;
        color:#999999;
        margin-top: 8px;
        display: flex;
        & > div{
            &:nth-child(1){
                max-width: 552px;
                 white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-right: 10px;

            }
            &:nth-child(2){
                    flex: 1;
            }
        }
    }
    .delete_expe {
        width: 30px;
        height: 30px;
        position: absolute;
        right: -10px;
        top: -10px;
        float: right;
    }

    .delete_expe img {
        width: 100%;
        height: 100%;
        float: left;
    }
</style>
